<template>
  <div>
  <div class="columnLayout container">
    <section class="left-container">
        <h5>货物</h5>
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-menu-item :index="(index+'')" v-for="(item,index) in this.menus" :key="index">
            <span @click="getProductQuatityIndexInfo(item.productId)">{{item.productName}}</span>
          </el-menu-item>
        </el-menu>
    </section>
    <section class="right-container">
      <div>
        <section class="add-btn">
          <h4>货物质检指标</h4>
          <p><el-button type="primary" @click="edit('add')"  v-if="!noShow" >新增</el-button></p>
        </section>
        <el-table
          size="mini"
          v-loading="loading"
          :data="tableData"
          style="width: 100%;"
          border
          :header-cell-style="{
        'background-color': '#eeeeee !important',
      }">
          <el-table-column type="index" label="序号" width="60" align="center">
            <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="质检指标"
            prop="indexName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="指标范围"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{scope.row.indexValueLower}}~{{scope.row.indexValueUpper}}
            </template>
          </el-table-column>
          <el-table-column
            label="质量说明"
            prop="indexDescribe"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="122px" v-if="!noShow">
            <template slot-scope="scope">
              <el-link
                v-if="hasPermission('busin:quatityIndex:add')"
                type="primary"
                :underline="false"
                @click="edit('edit',scope.row)"
              >修改</el-link
              >
              <el-link
                v-if="hasPermission('busin:quatityIndex:del')"
                type="primary"
                :underline="false"
                @click="del(scope.row.id)"
              >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.pageSize"
          :current-page="page.pageNo"
          layout="total,prev,pager, next"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </section>
  </div>
      <el-dialog
      :title="title"
      :visible.sync="innerVisible"
      class="addForm-wrapper"
      :close-on-click-modal="false"
      append-to-body>

      <el-form
        label-width="93px"
        ref="form"
        :model="editForm"
      >
        <el-form-item label="选择指标:" prop="indexName"
                      :rules="[{required: true, message:'请选择指标'}]">
          <el-autocomplete placeholder="请选择指标" style="width: 290px;"
                           :debounce="0" :fetch-suggestions="querySearch2" @select="handleSelect($event)"
                           @keydown.native="keydown($event)"
                           :trigger-on-focus="true"
                           v-model="editForm.indexName"
                           clearable>
            <template slot-scope="{ item }">
              <section class="querySearch-autocomplete">
                <section class="name-item">
                  <section class="name"><span v-if="item.id">{{ item.names.substr(0, 1) }}</span></section>
                  {{ item.names }}
                </section>
                <section>
                </section>
              </section>
              <div></div>
            </template>
          </el-autocomplete>
        </el-form-item>




        <el-form-item label="指标范围:"  required>
          <div class="number-wrapper">
            <div>
              <el-form-item prop='indexValueLower' :rules="[
                  {required: true, message:'请输入指标下限', trigger:'blur'},
                 ]" >
                <el-input-number v-model="editForm.indexValueLower" :min="0" controls-position="right" size="mini"  :step="1" ></el-input-number>
              </el-form-item>
            </div>
            <div class="line">～</div>
            <div>
              <el-form-item prop='indexValueUpper' :rules="[
                  {required: true, message:'请输入指标上限', trigger:'blur'}
                 ]">
                <!--              <el-input-number v-model="editForm.indexValueUpper" controls-position="right" size="mini"  :min="1"></el-input-number>-->
                <el-input-number v-model="editForm.indexValueUpper" :min="0" controls-position="right" size="mini"  :step="1" ></el-input-number>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="指标说明:" prop="indexDescribe" :rules="[
                  {required: true, message:'请输入指标说明', trigger:'blur'}
                 ]">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="editForm.indexDescribe">
          </el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit('form')" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close('form')">取消</el-button>
      </span>
    </el-dialog>
    <!--选择指标弹窗-->
    <QualityIndexDialog ref="QualityIndexDialog" @getQualityIndexData="getQualityIndexData">

    </QualityIndexDialog>
  </div>


</template>
<script>
import {getList} from '@/api/business/qualityIndex.js'
  import {getProductQuatityIndexList, getProductQuatityIndexInfo, getQuatityIndexInfo, saveProductQuatityIndex, deleteProductQuatityIndex} from '@/api/business/business.js'
  import QualityIndexDialog from '@/components/dialog/qualityIndexDialog.vue'

export default {
  components: {
    QualityIndexDialog,
  },
  data () {
    return {
      noShow: false,
      innerVisible: false, // 新增修改dialog
      dialogVisible: false, // 指标库dialog
      productId: '',
      indexName: '',
      checked: false,
      loading: false,
      title: '维护质量标准',
      businessId: '',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      menus: [],
      tableData: [],
      editForm: {
        id: '',
        businessId: '',
        productId: '',
        productQuatityId: '',
        indexId: '',
        indexName: '',
        indexType: '',
        indexDescribe: '',
        indexValueLower: '',
        indexValueUpper: ''
      }
    }
  },
  methods: {
    // 调用 callback 返回  选择指标下拉数据
    querySearch2 (queryString, cb) {
      getList({}).then((res) => {
        if (res.data.code === '200') {
          this.values = []
          for (let index = 0; index < res.data.result.length; index++) {
            let element = {
              id: res.data.result[index].id,
              names: res.data.result[index].indexName
            }
            this.values.push(element)
          }
          cb(this.values)// 返回搜索下拉框里面数据
        }
      })
    },
    // 操作点击选择搜索到的数据可以不要
    handleSelect ($event) {
      this.editForm.indexName = $event.names
      this.getQualityIndexData($event)
    },
    keydown (e) {
      if (e.keyCode === 32) {
        e.returnValue = false
      }
    },
    // 选择指标弹窗
    getQualityIndexClient () {
      this.$refs.QualityIndexDialog.qualityVisible = true
    },
    // 选择指标数据回显
    getQualityIndexData (row) {
      this.editForm.indexName = row.names
      this.indexName = row.names
      this.editForm.indexId = row.id
      this.editForm.indexType = row.indexType
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 左侧货物列表
    getProductQuatityIndexList (businessId) {
      this.businessId = businessId
      getProductQuatityIndexList({businessId: businessId}).then((res) => {
        if (res.data.code === '200') {
            if (res.data.result.length > 0) {
                this.menus = res.data.result
                this.productId = this.menus[0].productId
                this.getProductQuatityIndexInfo(this.productId)
            }
        }
      })
    },
    // 货物明细
    getProductQuatityIndexInfo (businessProductId) {
      this.productId = businessProductId
      getProductQuatityIndexInfo({
        productId: businessProductId,
        businessId: this.businessId,
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.result.list
          this.page.total = res.data.result.count
        }
      })
    },

    // 新增质量要求
    edit (method, editForm) {
      if (!this.menus.length) {
        this.$message({
          type: 'error',
          message: '货物列表为空，暂无法新增货物质检指标！'
        })
        return
      }
      if (method === 'add') {
        this.editForm = {}
        this.innerVisible = true
      } else if (method === 'edit') {
        getQuatityIndexInfo({id: editForm.id}).then((res) => {
          if (res.data.code === '200') {
            this.innerVisible = true
            this.$nextTick(() => {
              this.editForm = {}
              this.editForm.id = res.data.result.id
              this.editForm.businessId = res.data.result.businessId
              this.editForm.productQuatityId = res.data.result.productQuatityId
              this.editForm.indexName = res.data.result.indexName
              this.editForm.indexType = res.data.result.indexType
              this.editForm.indexDescribe = res.data.result.indexDescribe
              this.editForm.indexValueLower = res.data.result.indexValueLower
              this.editForm.indexValueUpper = res.data.result.indexValueUpper
            })
            this.title = '质量要求设置'
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      }
    },
    // 删除质量
    del (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteProductQuatityIndex({id: id}).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getProductQuatityIndexInfo(this.productId)
          }
        })
      })
    },
    doSubmit () {

      if (this.businessId) {
        this.$refs.form.validate((valid) => {
          if (valid) {
              if (this.productId) {
                  this.$set(this.editForm, 'businessId', this.businessId)
                this.$set(this.editForm, 'productId', this.productId)
                saveProductQuatityIndex(this.editForm).then((res) => {
                      if (res.data.code === '200') {
                          this.$message({
                              message: '编辑成功',
                              type: 'success'
                          })
                          this.innerVisible = false
                          this.$emit('refreshDataList')
                          this.getProductQuatityIndexInfo(this.productId)
                      }
                  })
            } else {
                  this.$notify.error({
                      title: '错误',
                      message: '无产品数据'
                  })
              }
          }
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择单条业务数据'
        })
      }
    },
    close (formName) {
      this.$refs[formName].resetFields()
      this.innerVisible = false
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getProductInfo(this.productId)
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getProductInfo(this.productId)
    }
  },

  mounted () {

  }
}
</script>
<style lang="scss" scoped>
//$b = localStorage.getItem('defaultTheme')
.columnLayout{
    padding-left: 3px;
    padding-top: 2px;
    .left-container{
      h5{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 10px 0;
        padding-left: 15px;
      }
      .el-menu-item{
        line-height: 32px;
        height: 32px;
        font-size: 16px;
      }
      .el-menu-item.is-active{

        //background-color: $b;
        //color: #1890FF;
      }
    }
    .right-container{
      h4{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 10px 0;
        flex: 1;
      }
      .add-btn{
        margin-bottom: 2px;
        display: flex;
        p{
          margin: 0;
          height: 30px;
          line-height: 38px;
        }
       .el-button{
         margin-right: 0;
       }
      }
    }
    ::v-deep.el-table{
      td:last-child .cell{
        padding-right: 10px !important;
      }
    }
  }
  .el-dialog__wrapper.addForm-wrapper{
        ::v-deep .el-dialog{
            .el-form-item__content .number-wrapper .el-input-number{
                width: 148px !important;
                .el-input__inner{
                    min-width: 148px !important;
                }
            }
        }
    }

</style>
